<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>外边距</title>
		<style>
			/* 初始化所有标签的内边距和外边距,写的样式中最开始的位置 */
			*{		/*通配符:指所有的标签 */
				margin: 0;
				padding: 0;
			}
			.box1{
				width: 400px;
				height: 400px;
				background-color: skyblue;
				/* 设置块级盒子水平居中 ：给盒子的左右外边距设置为auto（自动的）*/
				margin:10px auto 0;
				margin-bottom: 80px;
				
			}
			.box2{
				width: 300px;
				height: 300px;
				background-color: deeppink;
				margin-top: 120px;
			}
			/* 外边距问题1:相邻块级元素垂直外边距合并 
			解决:一般只给其中一个盒子设置外边距.
			外边距问题2：嵌套块级盒子之间外边距的塌陷。
			解决方法1：给父盒子添加1边框；
			解决方法2：给父盒子添加内边距，但是会导致父盒被撑大
			解决方法3：给父盒子添加样式overflow：hidden;
			*/
			.bigbox{
				width: 600px;
				height: 600px;
				background-color: bisque;
				margin-top: 100px;
				/* border: 1px	solid black */
				/* padding-top: 100px; */
				overflow: hidden;    /* 超出部分隐藏，能解外边距的塌陷问题 */
				}
			.sbox{
				width: 300px;
				height: 300px;
				background-color: aquamarine;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="bigbox">
		     <div class="sbox"></div>
		</div>
	</body>
</html>
